import Link from "next/link";
import { getDictionary, type Locale } from "@/lib/site-content";

export default async function ConsolePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dictionary = getDictionary(locale as Locale);

  return (
    <div className="page-stack">
      <section className="section-panel">
        <div className="dashboard-top">
          <div>
            <div className="eyebrow">{dictionary.console.tag}</div>
            <h1>{dictionary.console.title}</h1>
            <p>{dictionary.console.subtitle}</p>
          </div>
          <div className="dashboard-actions">
            <Link className="button button-light" href={`/${locale}/pricing`}>
              {dictionary.console.billingCta}
            </Link>
            <Link className="button button-dark" href={`/${locale}/login`}>
              {dictionary.console.loginCta}
            </Link>
          </div>
        </div>

        <div className="stats-grid">
          {dictionary.console.metrics.map((metric) => (
            <article className="stat-card" key={metric.label}>
              <strong>{metric.value}</strong>
              <span>{metric.label}</span>
            </article>
          ))}
        </div>
      </section>

      <section className="dashboard-grid">
        <article className="dashboard-card">
          <div className="section-heading compact">
            <div className="eyebrow">{dictionary.console.skillsTag}</div>
            <h2>{dictionary.console.skillsTitle}</h2>
          </div>
          <div className="table-list">
            {dictionary.console.officialSkills.map((skill) => (
              <div className="table-row" key={skill.name}>
                <div>
                  <strong>{skill.name}</strong>
                  <span>{skill.routeKey}</span>
                </div>
                <p>{skill.status}</p>
              </div>
            ))}
          </div>
        </article>

        <article className="dashboard-card">
          <div className="section-heading compact">
            <div className="eyebrow">{dictionary.console.keysTag}</div>
            <h2>{dictionary.console.keysTitle}</h2>
          </div>
          <div className="table-list">
            {dictionary.console.apiKeys.map((key) => (
              <div className="table-row" key={key.name}>
                <div>
                  <strong>{key.name}</strong>
                  <span>{key.masked}</span>
                </div>
                <p>{key.scope}</p>
              </div>
            ))}
          </div>
        </article>
      </section>

      <section className="dashboard-grid">
        <article className="dashboard-card">
          <div className="section-heading compact">
            <div className="eyebrow">{dictionary.console.usageTag}</div>
            <h2>{dictionary.console.usageTitle}</h2>
          </div>
          <div className="table-list">
            {dictionary.console.usageRows.map((row) => (
              <div className="table-row" key={row.name}>
                <div>
                  <strong>{row.name}</strong>
                  <span>{row.count}</span>
                </div>
                <p>{row.cost}</p>
              </div>
            ))}
          </div>
        </article>

        <article className="dashboard-card billing-card">
          <div className="section-heading compact">
            <div className="eyebrow">{dictionary.console.planTag}</div>
            <h2>{dictionary.console.planTitle}</h2>
          </div>
          <p className="billing-copy">{dictionary.console.planDescription}</p>
          <ul className="bullet-list">
            {dictionary.console.planBenefits.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
          <Link className="button button-dark" href={`/${locale}/pricing`}>
            {dictionary.console.planCta}
          </Link>
        </article>
      </section>
    </div>
  );
}